<template>
	<view class="content">
		<u-toast ref="uToast" />
		<view class="title">
			<input type="text" @input="setTitle" placeholder="起个名字吧~" placeholder-style="color:#fff" :value="title" />
		</view>
		<view class="info">
			<textarea @input="setInfo" :value="info" class="textarea" placeholder-class="textarea-p" placeholder="需要帮小主记录什么呢~" />
			<u-upload max-count="1" :multiple="false" @on-choose-complete="getImageList"    :auto-upload="false" :file-list="fileList" ></u-upload>
		</view> 
		<u-gap height="10" bg-color="none"></u-gap>
		<view class="isopen">
			<text>是否开启提醒</text> <view >
			<u-switch size="36" v-model="checked"></u-switch>
			</view>
		</view>
	
		<u-gap height="10" bg-color="none"></u-gap>
		<view class="isopen" @click="show=true" v-if="checked">
			<text>提醒时间</text>
			{{`${time.month}月${time.day}日 ${time.hour}时`}}
		</view>

		<view class="commit">
			<u-button type="primary"  :loading="commitloading" @click="cimmit">提交保存一下啦~</u-button>
		</view>
		<u-picker :start-year="new Date().getFullYear()" :safe-area-inset-bottom="true" v-model="show" mode="time" @confirm="setTime":params="params"></u-picker>
	</view>
</template>

<script>
	import {
		uToast
	} from '@/uview/components/u-toast/u-toast.vue';
	import {mapGetters} from 'vuex';
	let time = new Date()
	let year = Number(time.getFullYear()) < 10 ? `0${ Number(time.getFullYear())}` : time.getFullYear()
	let month = Number(time.getMonth() + 1) < 10 ? `0${ time.getMonth() + 1}` : time.getMonth() + 1
	let day = Number(time.getDate()) < 10 ? `0${time.getDate()}` : time.getDate()
	let hours = Number(new Date(Date.now() + (3 * 60 * 60 * 1000))) < 10 ? `0${ new Date(Date.now() + (3 * 60 * 60 * 1000)).getHours()}` : new Date(Date.now() + (3 * 60 * 60 * 1000)).getHours()
	export default {
		data() {
			return {
				action: 'http://www.example.com/upload',
				fileList: [],
				title:'',
				info:'',
				image:'',
				commitloading:false,
				show:false,
				checked:false,// 是否开启提示
				year: year.toString(),
				time:{  //提醒的日期
					day: day.toString(),
					hour: hours.toString(),
					month:month.toString(),
				},
				params: { // 选择器的格式
					year: false,
					month: true,
					day: true,
					hour: true,
					minute: false,
					second: false
				},
			};
		},
		watch:{
			checked:function(value){
				if(value){
					this.getSubscribeMessage()
				}
			}
		},
		onReady() {
	
		}, 
		computed:{ 
			...mapGetters(['openid'])
		},
		methods:{
			// 获取模板小希
			getSubscribeMessage(){
				let _this=this
				//#ifdef MP-WEIXIN
				uni.requestSubscribeMessage({
					tmplIds:['jKBlYPmn5e9Fb-2Kt_FrplnxcN53XOHOOF28a9k9PXE'],
					success:(res)=>{
						console.log(res)
						if(res['jKBlYPmn5e9Fb-2Kt_FrplnxcN53XOHOOF28a9k9PXE']!=='accept'){
							_this.$refs.uToast.show({
								title: '小主，您拒绝了发送信息！',
								type: 'error', 
							})
							_this.checked=false
						}else{
							_this.$refs.uToast.show({
								title: '记得选择提醒时间~',
								type: 'success', 
							})
						}
					},
					fail:()=>{
						console.log('获取失败')
						uni.showModal({
							title:'开启失败了~',
							content:'权限被小主关起来了，是否去打开？',
							confirmColor:()=>{
								uni.openSetting()
								_this.checked=false
							}
						})
				
						
					}
				})
				//#endif
				//#ifdef MP-QQ
				// console.log(qq)
				qq.subscribeAppMsg({
				  subscribe: true,
				  success(res) {
				    console.log("----subscribeAppMsg----success", res);
				  },
				  fail(res) {
				    console.log("----subscribeAppMsg----fail", res);
				  }
				});
				//#endif
			},
			setTime(res){
				this.time=res
			},
			// 设置标题
			setTitle(e){
				this.title=e.detail.value
			},
			// 设置记录实事件
			setInfo(e){
				this.info=e.detail.value
			},
			async cimmit(){
				//#ifdef MP-WEIXIN
				this.commitInfo('wx')
				//#endif
				//#ifdef MP-QQ
					this.commitInfo('qq')
				//#endif
			},
			async commitInfo(type){
				let _this=this
				if(this.title.length<=2){
				return	_this.$refs.uToast.show({
						title: '小主，这标题太短了吧~',
						type: 'error', 
					})
				}
				 if(this.info.length<=2){
				 return	_this.$refs.uToast.show({
				 		title: '小主，这内容太短了吧~',
				 		type: 'error', 
				 	})
				 }
				this.commitloading=true
				let item={
					openid:this.openid,
					title:this.title,
					info:this.info,
					image:this.image,
					issend:this.checked,
					sendsuccess:1, 
					year:this.year,
					month:this.time.month,
					day:this.time.day,
					hour:this.time.hour,
					type:type,
				}
				uniCloud.callFunction({
					name:'addListInfo',
					data:item,
				}).then(res=>{
					_this.commitloading=false
					_this.$refs.uToast.show({
						title: '添加成功咯~',
						type: 'success', 
					})
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
					console.log(res)
				}).catch(error=>{
					_this.commitloading=false
					_this.$refs.uToast.show({
						title: '小主，添加失败啦~',
						type: 'error', 
					})
				})
			},
			imageChange(res){
				console.log(res)
			},
			getImageList(res){
				let item={
					filePath:res[0].url,
					cloudPath: Date.now()+'.png'
				}
				this.uploadimg(item)
			},
			uploadimg(options) {
				let _this=this
				uni.showLoading({
					title: '文件上传中...'
				});
				uniCloud.uploadFile({
				...options,
				onUploadProgress(e) {
					console.log(e);
				}
				}).then(res => {
						uni.hideLoading();
							console.log(res);
							_this.image=res.fileID
					}).catch(err => {
						uni.hideLoading();
						if (err.message !== 'Fail_Cancel') {
							uni.showModal({
								content: `图片上传失败，错误信息为：${err.message}`,
								showCancel: false
							});
						}
					});
			}
		}
	}
</script>

<style lang="scss">
.content{
	min-height: 100vh;
}
.title{
	padding: $page-padding;
	padding-top:30rpx ;
	padding-bottom: 30rpx;
	display: flex;
	background-color: $u-type-primary;
	color: #fff;
	font-size: 30rpx;
	align-items: center;
	justify-content: space-between;
	input{
		flex: 1;
	}
}
.info{
	padding: $page-padding;
	padding-top: 30rpx;
	padding-bottom: 30rpx;
	background-color: #fff;
	.textarea{
		width: 100%;
		background-color: #fff;
		line-height: 1.5;
	}
}
.commit{
	padding: $page-padding;
	margin-top: 50rpx;
}
.isopen{
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: $page-padding;
	padding-top: 30rpx;
	padding-bottom: 30rpx;
}
</style>
